<template>
  <div class="app">
    <div>
      <div style="position: relative">
        <itemBox title="教师工作量预警" class="mt24">
          <!-- <table-scroll-pro
          :data="tableDataA"
          :columns="columnsA"
          :class-option="classOption"
          :table-config="tableConfig"
          :config="tableConfig"
        >
        </table-scroll-pro> -->
          <div class="chaofuhe">
            <div class="text">超负荷2</div>
          </div>
          <div class="bubaohe"><div class="text">不饱和3</div></div>
          <scroll style="height: 600px">
            <div v-for="item in workList">
              <div class="list">
                <div class="left">
                  <div class="icon">
                    <img
                      style="
                        width: 16px;
                        height: 20px;
                        position: relative;
                        top: 5px;
                      "
                      src="@/assets/check/2.png"
                      alt=""
                    />
                    <img
                      style="
                        width: 54px;
                        height: 36px;
                        position: relative;
                        top: -6px;
                      "
                      src="@/assets/check/1.png"
                      alt=""
                    />
                  </div>
                  <div style="text-align: center; margin-top: 3px">
                    {{ item.school }}
                  </div>
                </div>
                <div class="right">
                  <div class="rightBox">
                    <div><span class="rightSmall">教师：</span>{{ item.teacherName }}</div>
                    <div><span class="rightSmall">职务：</span>{{ item.job }}</div>
                  </div>
                  <div class="rightBox">
                    <div><span class="rightSmall">标准周节数：</span>{{ item.standard }}</div>
                    <div>
                      <span class="rightSmall">实际周节数：</span
                      ><span style="color: #fb0000">{{ item.actual }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="border"></div>
            </div>
          </scroll>
        </itemBox>
      </div>
    </div>
    <!-- border-bottom: 1px solid #073b71 -->
    <div style="margin-top: 24px; position: relative">
      <itemBox title="食材日采购预警" class="mt24">
        <!-- <table-scroll-pro
          :data="tableDataA"
          :columns="columnsA"
          :class-option="classOption"
          :table-config="tableConfig"
          :config="tableConfig"
        >
        </table-scroll-pro> -->
        <div class="yujing">
          <div class="text">预警 5</div>
        </div>
        <div class="titit">
          <div class="canteen">食堂数:</div>
          <div class="canteenNum">0</div>
          <div class="canteenNum">4</div>
          <div class="canteenNum">3</div>
          <div class="canteenNum">2</div>
          个
        </div>

        <div class="tableHead">
          <div
            v-for="(item, index) in tableHeadList2"
            :key="item.id"
            class="tabHead"
          >
            {{ item.name }}
          </div>
        </div>
        <scroll style="height: 245px" >
          <div class="tableContent" v-for="item in tableContentList2">
            <div class="tableContentTit">
              <div style="display: flex">
                <div style="margin: 5px">{{ item.rank }}</div>
                <div style="margin: 5px">{{ item.school }}</div>
              </div>
              <img src="@/assets/check/icon.png" class="addd"></img>
            </div>
            <div style="display: flex">
              <template v-for="(val, key) in item">
                <div
                  v-if="key !== 'rank' && key !== 'school'"
                  :key="val.rank"
                  class="ttt"
                  :class="{ blueText: key === 'foodPercent' }"
                >
                  {{ val }}
                </div>
              </template>
            </div>
          </div>
        </scroll>
      </itemBox>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import countTo from "vue-count-to";
import pageTitle from "../../components/pageTitle";
import itemBox from "../../components/itemBox";
import subTit from "../../components/subTit";
import chart from "@/components/eChart";
import scroll from "@/views/food/components/tableScroll/index.vue";
let mixin = new drawMixin();

export default {
  name: "index",
  components: { countTo, pageTitle, itemBox, subTit, chart, scroll },
  mixins: [mixin],
  data() {
    return {
      workList: [
        {
          school: "某某某某学校",
          teacherName: "某某某",
          job: "教导主任",
          standard: "14",
          actual: "16",
        },
        {
          school: "某某某某学校",
          teacherName: "某某某",
          job: "教导主任",
          standard: "14",
          actual: "16",
        },
        {
          school: "某某某某学校",
          teacherName: "某某某",
          job: "教导主任",
          standard: "14",
          actual: "16",
        },
        {
          school: "某某某某学校",
          teacherName: "某某某",
          job: "教导主任",
          standard: "14",
          actual: "15",
        },
        {
          school: "某某某某学校",
          teacherName: "某某某",
          job: "教导主任",
          standard: "14",
          actual: "15",
        },
        {
          school: "某某某某学校",
          teacherName: "某某某",
          job: "教导主任",
          standard: "14",
          actual: "15",
        },

      ],
      tableHeadList2: [
        {
          name: "学生数（人）",
        },
        {
          name: "教师数（人）",
        },
        {
          name: "食材名称",
        },
        {
          name: "全市平均使用量",
        },
        {
          name: "本校人均使用量",
        },
        {
          name: "高出全市百分比",
        },
      ],
      tableContentList2: [
        {
          rank: "xxxx学校",
          studentNum: "1325",
          teacherNum: "32",
          food: "白菜",
          cityAverage: "212",
          schoolAverage: "218",
          foodPercent: "3.2%",
        },
        {
          rank: "xxxx学校",
          studentNum: "1229",
          teacherNum: "36",
          food: "白菜",
          cityAverage: "212",
          schoolAverage: "218",
          foodPercent: "3.2%",
        },
        {
          rank: "xxxx学校",
          studentNum: "1021",
          teacherNum: "41",
          food: "白菜",
          cityAverage: "212",
          schoolAverage: "217",
          foodPercent: "2.9%",
        },
        {
          rank: "xxxx学校",
          studentNum: "851",
          teacherNum: "32",
          food: "白菜",
          cityAverage: "212",
          schoolAverage: "216",
          foodPercent: "2.8%",
        },
        {
          rank: "xxxx学校",
          studentNum: "952",
          teacherNum: "31",
          food: "白菜",
          cityAverage: "212",
          schoolAverage: "216",
          foodPercent: "2.7%",
        },
      ],
      columnsA: [
        {
          label: "学生数（人）",
          prop: "data",
          align: "center",
          width: 72,
        },
        { label: "餐费（元）", prop: "peopleNum", width: 72, align: "center" },
        { label: "食材采购费（元）", prop: "data", width: 72, align: "center" },
        { label: "人工费（元）", prop: "data", width: 72, align: "center" },
        { label: "其他（元）", prop: "data", width: 72, align: "center" },
        { label: "食材占餐费比", prop: "data", width: 72, align: "center" },
      ],
      tableDataA: [
        {
          name: `xxxxx学校`,
          peopleNum: "xxx",
          data: "xxx",
        },
        {
          name: `xxxxx学校`,
          peopleNum: "xxx",
          data: "xxx",
        },
        {
          name: `xxxxx学校`,
          peopleNum: "xxx",
          data: "xxx",
        },
        {
          name: `xxxxx学校`,
          peopleNum: "xxx",
          data: "xxx",
        },
        {
          name: `xxxxx学校`,
          peopleNum: "xxx",
          data: "xxx",
        },
      ],
      classOption: {
        limitMoveNum: 4,
        singleHeight: 60, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
        waitTime: 2000, // 单步停止等待时间(默认值1000ms)
      },
      tableConfig: {
        headerHeight: "70px",
        rowHeight: "60px",
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: "LESLIE";
  src: url("~@/assets/food/LESLIEB.TTF");
}
.app {
  width: 100%;
  height: 100%;
  .yujing {
    width: 152px;
    height: 40px;
    background-image: url("~@/assets/check/yujing.png");
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 0;
    .text {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #ffdeaa;
      letter-spacing: 1.2px;
      text-align: center;
      line-height: 40px;
      font-weight: 500;
    }
  }
  .chaofuhe {
    width: 110px;
    height: 40px;
    background-image: url("~@/assets/check/chaofuhe.png");
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 112px;
    .text {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #ffdeaa;
      letter-spacing: 1.2px;
      text-align: center;
      line-height: 40px;
      font-weight: 500;
    }
  }
  .bubaohe {
    width: 110px;
    height: 40px;
    background-image: url("~@/assets/check/bubaohe.png");
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 0;
    .text {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #ffdeaa;
      letter-spacing: 1.2px;
      text-align: center;
      line-height: 40px;
      font-weight: 500;
    }
  }
  .border {
    width: 100%;
    height: 4px;
    background: url("~@/assets/imgSchoolHouse/divider_s.svg") no-repeat;
    margin: 24px 0;
  }

  .list {
    position: relative;
    display: flex;
    width: 100%;

    .left {
      width: 148px;
      height: 54px;
      border-right: 1px solid rgba(76, 154, 255, 0.28);
      padding-right: 16px;
      display: flex;
      // align-items: flex-start;
      .icon {
        text-align: center;
      }
      .number {
        font-size: 16px;
      }
    }
    .right {
      margin-top: 6px;
      font-size: 16px;
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: space-around;
      .rightBox {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        .rightSmall {
          margin-top: 8px;
          font-size: 14px;
          color: #b5bac2;
        }
      }
    }
  }
  ::v-deep .cell {
    font-size: 16px;
  }
  .titit {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;
    .canteen {
      margin: 0 14px 0 105px;
      font-size: 16px;
      width: 64px;
      font-family: PingFangSC-Regular;
      color: #ffffff;
      font-weight: 400;
    }
    .canteenNum {
      margin-left: 6px;
      width: 26px;
      height: 40px;
      background-image: url("~@/assets/food/chuyu.png");
      background-size: cover;
      font-family: LESLIE;
      color: #aefaff;
      font-size: 36px;
    }
    .canteenNum:last-child {
      margin-right: 12px;
    }
  }
  .tableHead {
    height: 74px;
    display: flex;
    text-align: center;
    background-color: #022459;
    padding: 14px;
    font-size: 16px;
    .tabHead {
      height: 42px;
      text-align: center;
      // width: 70px;
    }
  }
  .tableContent {
    height: 74px;
    margin: 6px 0;
    padding: 9px 15px;
    background-color: rgba(3, 31, 73, 0.5);
    font-size: 16px;
    .tableContentTit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .addd {
        width: 20px;
        height: 12px;
        margin-right:24px
      }
    }
    .ttt {
      display: flex;
      justify-content: space-around;
      width: 80px;
      height: 34px;
      text-align: center;
      font-size: 16px;
    }
  }
  .tableContent:nth-child(2n) {
    background-color: #042043; /* 设置第二个 .tableContent 的背景色为白色 */
  }

  .blueText {
    color: #00fffa;
  }
}
</style>
